<template>
	<div>
		<navigationBar navigationTitle="首页" />

		<view class="wrap-test">
			<block v-for="(item, index) in banner" :key="index">
				<image class="img" lazy-load :src="item.file" @error="$set(banner[index], 'file', $defaultIcon)" />
			</block>
		</view>

		<view class="wrap paddingBottom">
			<banner :bannerList="bannerList" />

			<view class="authen-bg">
				<authenInfo :showType="1" />
			</view>

			<view class="wrap-list">
				<headlineVue title="推荐项目" />

				<projectList :list="list" />
			</view>
		</view>

		<tabBar :current="0" />
	</div>
</template>

<script>
	import { homeData } from "@/API/home.js";
	import tabBar from "@/components/tabBar/tabBar.vue";
	import banner from "@/components/home/banner.vue";
	import authenInfo from "@/components/home/authenInfo.vue";
	import headlineVue from "@/components/home/headline.vue";
	import projectList from "@/components/home/projectList.vue";
	export default {
		components: {
			tabBar,
			banner,
			authenInfo,
			headlineVue,
			projectList,
		},
		data() {
			return {
				bannerList: [], // 轮播图列表
				page: 1, // 当前页数
				total: 0, // 总页数
				list: [], // 列表数据

				banner: [
					{ file: "https://aaa.bbb.com/ccc.jpg" },
					{ file: "https://aaa.bbb.com/ddd.jpg" },
					{ file: "https://aaa.bbb.com/eee.jpg" },
				],
			};
		},
		onLoad() {
			this.onRefresh();
		},
		onPullDownRefresh() {
			this.onRefresh();
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++;
				this.getData();
			}
		},
		methods: {
			/**
			 * 图片加载失败
			 */
			onImageError(index) {
				console.log("AAAAAAAAA");
				this.banner[index] = this.$defaultIcon;
				console.log(this.banner);
				this.$set(this.banner, index, this.$defaultIcon);
			},
			/**
			 * 刷新
			 */
			onRefresh() {
				this.page = 1;
				this.getData();
			},
			/**
			 * 网络请求
			 */
			getData() {
				homeData(this.page).then((res) => {
					this.total = res.data.service.total;
					const list = res.data.service.data;
					if (this.page === 1) {
						this.bannerList = res.data.banner;
						this.list = list;
					} else {
						this.list = this.list.concat(list);
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap {
		--bottom-height: 120rpx;

		.authen-bg {
			width: 100%;
			height: 76rpx;
			background-color: white;
			padding: 0 15rpx;
			box-sizing: border-box;
			overflow: hidden;
		}

		.wrap-list {
			margin-top: 20rpx;
			width: 100%;
			overflow: hidden;
		}
	}

	.wrap-test {
		margin-top: 20rpx;
		width: 100%;
		background: red;

		.img {
			width: 100%;
			height: 200rpx;
		}
	}
</style>
